<template>
    <div>
        <ul class="secondary-tabs">
            <li class="secondary-tabs__tab" v-for="tab in tabs" :class="{'secondary-tabs__tab--active': tab.isActive }" v-on:click="selectTab(tab)">
                <div class="secondary-tabs__tab-label">
                    {{ tab.name }}
                </div>
            </li>
        </ul>

        <div>
            <slot></slot>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                tabs: []
            }
        },

        created() {
            this.tabs = this.$children;
        },

        methods: {
            selectTab(selectedTab) {
                this.tabs.forEach(tab => {
                    tab.isActive = (tab.name == selectedTab.name);
                });
            }
        }

    }
</script>